<template>
  <div>
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>
          <i class="el-icon-lx-cascades"></i> 学院管理
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="container">
      <div class="handle-box">
        <el-form :inline="true" :model="query" class="demo-form-inline">
          <el-form-item>
            <el-input
                v-model="query.name"
                placeholder="地点"
                class="handle-input mr10"
            ></el-input>
          </el-form-item>
          <el-form-item label="发布日期">
            <div class="block">
              <el-date-picker
                  v-model="query.newsTime"
                  type="date"
                  placeholder="选择一个日期"
                  format="YYYY-MM-DD"
                  value-format="YYYY-MM-DD"
                  :disabled-date="disabledDate"
                  :shortcuts="shortcuts"
              >
              </el-date-picker>
            </div>
          </el-form-item>
          <el-form-item>
            <el-button
                type="primary"
                icon="el-icon-search"
                @click="handleSearch"
            >搜索
            </el-button
            >
          </el-form-item>
        </el-form>
        <el-table
            :data="tableData"
            border
            class="table"
            ref="multipleTable"
            header-cell-class-name="table-header"
        >
          <!--          <el-table-column-->
          <!--              :show-overflow-tooltip="true"-->
          <!--              :prop="item.prop"-->
          <!--              :label="item.label"-->
          <!--              v-for="item in props"-->
          <!--              :key="item.prop"-->
          <!--          >-->
          <!--          </el-table-column>-->
          <el-table-column label="地点" prop="title" align="center"></el-table-column>
          <el-table-column label="作者" prop="author" align="center"></el-table-column>
          <el-table-column label="发布时间" prop="newsTime" align="center"></el-table-column>
          <el-table-column label="风光样例" align="center">
            <template #default="scope">
              <p v-if="scope.row.content!=null">
                                 <span v-for="(item,index) in scope.row.content.split(',')" :key="index">
                               <el-image style="display: inline-flex;padding: 10px;width: 30%;height: 10%"
                                         class="table-td-thumb"
                                         :src="item"
                                         :preview-src-list="[item]"
                               ></el-image>
                  </span>
              </p>

            </template>
          </el-table-column>
          <el-table-column label="发布" align="center">
            <template #default="scope">
              <el-switch
                  v-model="scope.row.releaseType"
                  active-value="1"
                  inactive-value="0"
                  active-text="发布"
                  inactive-text="撤回"
                  active-color="#13ce66"
                  inactive-color="#ff4949"
                  @change="changeState($event, scope.row.sid)"
              />
            </template>
          </el-table-column>
          <el-table-column>
            <el-table-column
                label="操作"
                width="180"
                align="center"
                fixed="right"
            >
              <template #default="scope">
                <el-button
                    type="text"
                    icon="el-icon-delete"
                    class="red"
                    @click="handleDelete(scope.$index, scope.row.sid)"
                >删除
                </el-button
                >
              </template>
            </el-table-column>
          </el-table-column>
        </el-table>
        <div class="pagination">
          <el-pagination
              :currentPage="query.pageNum"
              :page-sizes="[10, 20, 40]"
              :page-size="query.pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="pageTotal"
              @size-change="handleSizeChange"
              @current-change="handlePageChange"
          >
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import request from "@/utils/request";
import {reactive, ref} from "vue";
import {ElMessage, ElMessageBox} from "element-plus";

const query = reactive({
  name: "",
  newsTime: "",
  releaseType: "",
  pageNum: 1,
  pageSize: 10,
});
const tableData = ref([])
const pageTotal = ref(0);
const getData = () => {
  request
      .get("/article/queryListSchool", {
        params: query,
      })
      .then((res) => {
        tableData.value = res.data.records;
        pageTotal.value = res.data.total;
      });
}
getData()
const checkStates = () => {
  query.releaseType = "0"
  getData()
};
const checkStatesThree = () => {
  query.releaseType = "1"
  getData()
};
// 查询操作
const handleSearch = () => {
  query.pageNum = 1;
  getData();
};
// 分页大小
const handleSizeChange = (val) => {
  query.pageSize = val;
  getData();
};
// 分页导航
const handlePageChange = (val) => {
  query.pageNum = val;
  getData();
};
// 删除操作
const handleDelete = (index, sid) => {
  // 二次确认删除
  ElMessageBox.confirm("确定要删除吗？", "提示", {
    type: "warning",
  })
      .then(() => {
        request.delete("/article/" + sid).then((res) => {
          if (res.data) {
            ElMessage.success("删除成功");
            tableData.value.splice(index, 1);
          } else {
            ElMessage.error("删除失败");
          }
        });
        getData();

      })
      .catch(() => {
      });
};
const changeState = (val, id) => {
  var article = {
    sid: id,
    releaseType: val,
  };
  request.post("/article/updateStateType", article).then((res) => {
    if (res.code != null) {
      ElMessage.error(res.msg);
    } else {
      if (val === "1") {
        ElMessage.success("发布成功");
      } else {
        ElMessage.success("撤回成功");
      }
      getData();
    }
  });
};
</script>

<style scoped>
</style>
